{% extends "base_generic.html" %}

{% block title %}Author List{% endblock %}

{% block content %}
  <div class="page-header" style="background: linear-gradient(45deg, #fd79a8, #e84393); color: white; padding: 30px; border-radius: 15px; margin: -15px -15px 30px -15px; box-shadow: 0 8px 25px rgba(232, 67, 147, 0.3);">
    <h1 style="margin: 0; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">✍️ Author List</h1>
  </div>
  
  {% if author_list %}
    <div class="table-responsive" style="background: rgba(255,255,255,0.9); border-radius: 15px; padding: 20px; box-shadow: 0 8px 25px rgba(0,0,0,0.08);">
      <table class="table table-striped table-hover" style="margin: 0;">
        <thead style="background: linear-gradient(45deg, #a29bfe, #6c5ce7); color: white;">
          <tr>
            <th style="border: none; padding: 15px; border-radius: 10px 0 0 0; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);">👤 Name</th>
            <th style="border: none; padding: 15px; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);">📅 Date of Birth</th>
            <th style="border: none; padding: 15px; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);">⚰️ Date of Death</th>
            <th style="border: none; padding: 15px; border-radius: 0 10px 0 0; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);">⚡ Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for author in author_list %}
            <tr style="transition: all 0.3s ease;">
              <td style="padding: 15px; border: 1px solid #ecf0f1; background: linear-gradient(135deg, rgba(162, 155, 254, 0.05) 0%, rgba(108, 92, 231, 0.05) 100%);">
                <a href="{{ author.get_absolute_url }}" style="color: #2d3436; text-decoration: none; font-weight: bold; transition: all 0.3s ease;">
                  {{ author.last_name }}, {{ author.first_name }}
                </a>
              </td>
              <td style="padding: 15px; border: 1px solid #ecf0f1; color: #636e72;">
                {% if author.date_of_birth %}
                  <span style="color: #00b894; font-weight: bold;">{{ author.date_of_birth }}</span>
                {% else %}
                  <span class="text-muted" style="color: #b2bec3; font-style: italic;">Unknown</span>
                {% endif %}
              </td>
              <td style="padding: 15px; border: 1px solid #ecf0f1; color: #636e72;">
                {% if author.date_of_death %}
                  <span style="color: #e17055; font-weight: bold;">{{ author.date_of_death }}</span>
                {% else %}
                  <span class="text-muted" style="color: #b2bec3; font-style: italic;">-</span>
                {% endif %}
              </td>
              <td style="padding: 15px; border: 1px solid #ecf0f1;">
                <a href="{{ author.get_absolute_url }}" class="btn btn-sm btn-info" style="background: linear-gradient(45deg, #74b9ff, #0984e3); border: none; padding: 8px 15px; border-radius: 20px; color: white; text-decoration: none; font-weight: bold; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(116, 185, 255, 0.3);">
                  👁️ View Details
                </a>
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% else %}
    <div class="alert alert-warning" role="alert" style="background: linear-gradient(45deg, #fdcb6e, #e17055); color: white; border: none; border-radius: 15px; box-shadow: 0 6px 20px rgba(253, 203, 110, 0.3); text-align: center; padding: 30px;">
      <h3 style="margin: 0; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);">✍️ No Authors Available</h3>
      <p style="margin: 10px 0 0 0; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">There are no authors in the library.</p>
    </div>
  {% endif %}
  
  {% block pagination %}
    {{ block.super }}
  {% endblock %}

  <style>
    tbody tr:hover {
      background: linear-gradient(135deg, rgba(116, 185, 255, 0.1) 0%, rgba(162, 155, 254, 0.1) 100%) !important;
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    }
    
    tbody tr:hover td {
      border-color: #74b9ff !important;
    }
    
    tbody tr:hover a {
      color: #6c5ce7 !important;
      text-shadow: 0 0 10px rgba(108, 92, 231, 0.3);
    }
    
    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(116, 185, 255, 0.4) !important;
    }
  </style>
{% endblock %} 